import React, { useState, useEffect } from 'react';
import { Button, Table, Space, Form, Input, Select, message, Modal, InputNumber, Popconfirm} from 'antd';
import axios from '../../../../utils/myAixos'
import {
    useNavigate
} from "react-router-dom";
let id;
const Class = () => {
    // 列表表名
    const columns = [
        {
            title: '课程名称',
            dataIndex: 'kc_name',
            align: 'center',
            key:'kc_name'
        },
        {
            title: '教练',
            dataIndex: 'teacher',
            align: 'center',
            key:'teacher'

        },
        {
            title: '场馆',
            dataIndex: 'address',
            align: 'center',
            key:'address'

        },
        {
            title: '场地',
            dataIndex: 'address_big',
            align: 'center',
            key:'address_big'

        },
        {
            title: '课程时间',
            dataIndex: 'y_time',
            align: 'center',
            key:'y_time'

        },
        {
            title: '预约人数',
            dataIndex: 'number',
            align: 'center',
            key:'number'

        },
        {
            title: '操作',
            dataIndex: 'm_caozuo',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a type="primary" onClick={() => showModal(record)}>编辑</a>
                    <a type="primary" onClick={() => Record(record)}>预约记录</a>
                    <Popconfirm
                        title="删除该条数据"
                        description="确定删除吗？"
                        onConfirm={() => confirmDel(record)}
                        onCancel={cancelDel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <a type="primary">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },

    ];
    const [dataList, setDataList] = useState([]); //表格数据
    //获取团课课表数据
    const getStu = () => {
        axios({
            url: '/yuyueData',
            method: 'post'
        }).then(res => {
            console.log('2', res.data.data)
            console.log(res.status)
            if (res.status === 200) {
                setDataList(res.data.data)
            }
        }).catch(err => {
            console.log('获取团课课表数据', err)
        })

    }
    //1、获取到所有学生的数据
    useEffect(() => {
        getStu()
    }, [])
    //确定删除
    const confirmDel = (row) => {
        console.log('确定删除按钮', row)
        //发请求
        axios({
            url: '/yuyueeDel',
            method: 'post',
            data: {
                id: row.id
            }
        }).then(res => {
            console.log('删除学生数据', res)
            if (res.status === 200) {
                message.success("删除成功")
                getStu()
            } else {
                message.error("删除失败")
            }
        }).catch(err => {
            console.log('删除学生数据', err)
        })
    }
    const cancelDel = () => {

    }
    //点击查询
    const search = (params) => {
        console.log('values', params)
        axios({
            url: '/yuyueeSearch',
            method: 'post',
            data: params
        }).then(res => {
            console.log('查询信息的结果', res)
            if (res.status === 200) {
                setDataList(res.data.data)
                message.success('查询成功')
            } else {
                message.error('查询失败')
            }
        }).catch(err => {
            console.log('查询信息的结果', err)
        })
    }
    //预约
    const navigate = useNavigate()
    const Record = (row) => {
        console.log('确定预约按钮', row.v_id)
        navigate('/HomePage/record', { state: row })
    }
    
    //添加弹框
    const [open, setOpen] = useState(false);
    const Add= () => {
      setOpen(true);
    };
    const hideModal = () => {
        setOpen(false);
      };
    
    //添加信息
    const onFinish = (values) => {
            console.log('2222222222222Finish:', values);
            //第三步  发请求
            axios({
                url: '/yueadds',
                method: 'post',
                data:{
                    v_classname:values.v_classname,
                    v_teacher:values.v_teacher,
                    v_name:values.v_name,
                    v_number: values.v_number,
                    v_address:values. v_address,
                    v_time:values.v_time
                }
            }).then(res => {
                console.log('添加结果', res)
                if (res.status === 200) {
                    message.success('添加成功')
                    setOpen(false);
                    getStu()
                } else {
                    message.error('添加失败')
                }
            }).catch(err => {
                console.log('添加学生失败的结果', err)
            })
        };
        const onFinishFailed = (values) => {
            console.log('onFinishFailed:', values);
        }
        //编辑模态框
    
        const [isModalOpen, setIsModalOpen] = useState(false);
        const showModal=(row)=>{
            setIsModalOpen(true);
            console.log(row)
            id=row.id
            console.log(id,888)
            console.log(row.v_id,2546)
        }
        const handleCancel = () => {
            setIsModalOpen(false);
          };
    //编辑信息
    const FinishEdit= (values) => {     
        console.log('2222222222222Finish:', values);
        console.log(id,254)
        axios({
            url: '/yuyueeEdit',
            method: 'post',
            data:{
                v_classname:values.v_classname,
                v_teacher:values.v_teacher,
                v_name:values.v_name,
                v_number: values.v_number,
                v_address:values. v_address,
                v_time:values.v_time,
                id:id
            }
        }).then(res => {
            console.log('编辑结果', res)
            if (res.status === 200) {
                message.success('编辑成功')
                setIsModalOpen(false);
                getStu()
            } else {
                message.error('编辑失败')
            }
        }).catch(err => {
            console.log('编辑失败的结果', err)
        })      
    };

    return (
        <div className={"box"}>
            <header style={{margin:"20px"}}>
                <Form name="horizontal_login"
                    layout="inline"
                    onFinish={search}
                >
                    <Form.Item
                        name="kc_name"
                    >
                        <Input placeholder="课程名称" />
                    </Form.Item>
                    <Form.Item
                        name="teacher"
                    >
                        <Select
                            defaultValue="请选择课程教练"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '从有',
                                    label: '从有',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>
                    <Form.Item>
                        {/*#e6f4ff*/}
                        <Button type={"text"} style={{ border: "1px solid #D2D2D2" }} onClick={Add}>添加课程</Button>
                    </Form.Item>
                </Form>
            </header>
            {/* 表单 */}
            <Table columns={columns} dataSource={dataList} rowKey={record => record.v_id} />
            {/*编辑弹框*/}
            <Modal
                title="编辑课表"
                name="basic"
                onCancel={handleCancel}
                open={isModalOpen}  
                footer={null}
            >
                  <Form
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 600 }}
                  onFinish={FinishEdit}
                  autoComplete="off"                  
                >
                    <Form.Item
                        label="课程名称"
                        name="v_classname"
                        rules={[{ required: true, message: '姓名必填' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="课程教练"
                        name="v_teacher"
                    >
                        <Select
                            defaultValue="请选择课程教练"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '从有',
                                    label: '从有',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item
                        label="场馆"
                        name="v_name"
                    >
                        <Select
                            defaultValue="请选择课程场馆"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '大都会健身馆',
                                    label: '大都会健身馆',
                                },
                                {
                                    value: '硬汉健身馆',
                                    label: '硬汉健身馆',
                                },
                                {
                                    value: '足迹健身馆',
                                    label: '足迹健身馆',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item
                        label="场地"
                        name="v_address"
                    >
                        <Select
                            defaultValue="请选择课程场地"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '北京市',
                                    label: '北京市',
                                },
                                {
                                    value: '福州',
                                    label: '福州',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item label="可预约人数"
                        name="v_number"
                        rules={[{ required: true, message: '请输入可预约人数' }]}>
                            <InputNumber />
                    </Form.Item>
                    <Form.Item label="预约时间"
                        name="v_time"
                        rules={[{ required: true, message: '请输入预约时间' }]}>
                          <Select style={{width:'200px'}}>
                            <option value="19:00 - 19:45">19:00 - 19:45</option>
                            <option value="9:00 - 19:45">19:00 - 19:45</option>
                            <option value="9:00 - 19:45">8:30 - 18:30</option>
                         </Select>         
                    </Form.Item>
                    <Form.Item style={{display:"flex",flexDirection:"row", justifyContent:"center"}}>
                        <div style={{width:"100%",display:"flex",flexDirection:"row", justifyContent:"center"}} >
                        <Button type="primary" htmlType="submit" style={{marginRight:"10px",display:"flex", flexDirection:"row", justifyContent:"center"}}>
                            确定
                        </Button>
                        <Button type="primary" onClick={handleCancel} >
                            取消
                        </Button>
                        </div>
                    </Form.Item>
                </Form>
                
            </Modal>
            {/* 添加弹框 */}
            <Modal
                title="添加课表"
                open={open}
                name="basic"
                onCancel={hideModal}
                footer={null}
            >
                  <Form
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 600 }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"                  
                >
                    <Form.Item
                        label="课程名称"
                        name="v_classname"
                        rules={[{ required: true, message: '姓名必填' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="课程教练"
                        name="v_teacher"
                    >
                        <Select
                            defaultValue="请选择课程教练"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '小明',
                                    label: '小明',
                                },
                                {
                                    value: '小张',
                                    label: '小张',
                                },
                                {
                                    value: '从有',
                                    label: '从有',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item
                        label="场馆"
                        name="v_name"
                    >
                        <Select
                            defaultValue="请选择课程场馆"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '大都会健身馆',
                                    label: '大都会健身馆',
                                },
                                {
                                    value: '硬汉健身馆',
                                    label: '硬汉健身馆',
                                },
                                {
                                    value: '足迹健身馆',
                                    label: '足迹健身馆',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item
                        label="场地"
                        name="v_address"
                    >
                        <Select
                            defaultValue="请选择课程场地"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '北京市',
                                    label: '北京市',
                                },
                                {
                                    value: '福州',
                                    label: '福州',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item label="可预约人数"
                        name="v_number"
                        rules={[{ required: true, message: '请输入可预约人数' }]}>
                            <InputNumber />
                    </Form.Item>
                    <Form.Item label="预约时间"
                        name="v_time"
                        rules={[{ required: true, message: '请输入预约时间' }]}>
                          <Select style={{width:'200px'}}>
                            <option value="19:00 - 19:45">19:00 - 19:45</option>
                            <option value="9:00 - 19:45">19:00 - 19:45</option>
                            <option value="9:00 - 19:45">8:30 - 18:30</option>
                         </Select>         
                    </Form.Item>
                    <Form.Item style={{display:"flex",flexDirection:"row", justifyContent:"center"}}>
                        <div style={{width:"100%",display:"flex",flexDirection:"row", justifyContent:"center"}} >
                        <Button type="primary" htmlType="submit" style={{marginRight:"10px",display:"flex", flexDirection:"row", justifyContent:"center"}}>
                            确定
                        </Button>
                        <Button type="primary" onClick={handleCancel} >
                            取消
                        </Button>
                        </div>
                    </Form.Item>
                </Form>              
            </Modal>
        </div>
    )
}
export default Class  